<template>
  <div>
    <!-- 选择类型 -->
    <div class="selectType flex mt-15 row-around font-w-5">
      <div
        @click="selectType(item.type)"
        :class="['type', 'row-col-center', HomeType == item.type ? 'isType' : '']"
        v-for="item in typeList"
        :key="item.name"
      >
        {{ item.name }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { useUserStore } from "@/stores/user";
import { ref, defineProps, defineEmits } from "vue";
import { useRoute } from "vue-router";
const route = useRoute();
const props = defineProps({
  typeList: Array,
})
const emit = defineEmits(["selectType"]);
// const store = useUserStore();
const HomeType = ref(1)
const selectType = (type) => {
  if (HomeType.value == type) {
    return;
  }
  // store.setType(type)
  HomeType.value = type
  emit("selectType", type)
}
</script>

<style lang="scss" scoped>
.selectType {
  .type {
    width: 162px;
    height: 60px;
    border-radius: 10px;
    background: linear-gradient(270deg, #f3f3f3 0%, #e5e5e5 95%);
    color: #666666;
    font-weight: 600;
  }
  .isType {
    background: linear-gradient(270deg, #eef7ff 0%, #bbdfff 100%);
    z-index: inherit;
    color: #222222;
  }
}
</style>
